<template>
	<view class="main">
		<view class="topBox">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :circular="circular">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image class="image" :src="baseImage + item.picdir" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>

			<!-- <view class="logoBox" :style="{top:getStateHeight+'px',height:getMenuRectHeight+'px'}">
				<img :src="baseImage + usual.logo" alt="" class="img" v-if="usual.logo">
				<img :src="$store.imgUrl + 'logo.png'" alt="" class="img" v-else>
				<text class="span">{{ usual.title }}</text>
			</view> -->


			<!-- <view class="searchBox">
				<view class="inpBox">
					<van-icon name="search" color='#777' size='30rpx' />
					<input type="text" v-model="filters.keywords" placeholder-class="searchInp" placeholder="请输入关键词" />
					<view @click="onSearch" class="searchBtn">搜索</view>
				</view>
			</view> -->
		</view>

		<view class="content">
			<!-- <view class="tabBox">
				<view class="span" :class="{'active':filters.gangwei==item.gangwei}" v-for="item in cataList"
					@click="tabClick(item)">
					{{type==1? item.title.slice(0,5):item.gangwei.slice(0,5)}}
				</view>
				<view class="addIcon" @click="toSubmit">
					<van-icon name="plus" custom-style="font-size:31rpx;font-weight: bold;color:#fff;" />
				</view>
			</view> -->

			<!-- <view class="menu">
				<view class="menu-content">
					<scroll-view scroll-x="true" class="menu-view">
						<view class="menu-item" :class="{'active':filters.gangwei==item.gangwei}"
							v-for="item in cataList" @click="tabClick(item)">
							{{getCataLabel(item)}}
						</view>
					</scroll-view>
				</view>

				<view class="menu-plus" @click="toSubmit">
					<van-icon name="plus" custom-style="font-size:31rpx;font-weight: bold;color:#fff;" />
				</view>
			</view> -->

		<!-- 	<view class="nav">
				<text class="span active">推荐</text>
				<text class="span">最新</text>
				<view class="span-right">
					<div class="span rightIcon" @click="cityOpen">{{filters.city || "城市"}}
						<van-icon name="arrow-down" />
					</div>
					<view class="span rightIcon" @click="toToggle">
						筛选
						<van-icon name="arrow-down" />
					</view>
				</view>
				
			</view> -->

			<view class="list" v-if="type=='1'">
				<view class="li" v-for="item in dataList" :key="item.id" @click="openDetails(item)">
					<view class="name">
						{{item.name}}
					</view>
					<view class="infor">
						{{item.education}} | {{item.workType=="不限"?"工作形式不限":item.workType}} | {{item.workDanwei.includes('月')? '月':'日'}}薪
						{{item.isMianyi==1? '面议': Math.floor(item.workSalary)}}
					</view>
					<view class="school">
						<van-icon name="bookmark-o" color="#7BB9FF" size="29rpx" custom-style="margin-right:28rpx;" />
						{{item.school}}-{{item.major}}
					</view>
					<text class="text van-multi-ellipsis--l2">
						{{item.jineng || ""}}
					</text>
					<view class="avatar">
						<img :src="baseImage + item.avatar" alt="" class="img" v-if="item.avatar" />
						<img :src="baseImage + usual.seekerAvatar2" mode="" class="img" v-else-if="item.sex=='女'">
						<img :src="baseImage + usual.seekerAvatar1" mode="" class="img" v-else>
						<img :src="imgUrl + 'man.png'" alt="" class="icon" v-if="item.sex=='男'" />
						<img :src="imgUrl + 'woman.png'" alt="" class="icon" v-else-if="item.sex=='女'" />
					</view>
				</view>
			</view>

			<view class="list" v-else-if="type=='2'">
				<view class="item" v-for="item in dataList" :key="item.id" @click="openDetails(item)">
					<view class="item-main">
						<view class="item-line">
							<view class="item-title">
								{{item.title}}
							</view>
							<view class="item-price">
								{{item.isMianyi==0? (Math.floor(item.workSalary) + "元/天"):"面议"}}
							</view>
						</view>
						<view class="item-line">
							<text>{{item.workEducation=="不限"?"学历不限":item.workEducation}}</text>
							<text>{{item.workType=="不限"?"工作形式不限":item.workType}}</text>
						</view>
						<view class="item-tag" v-if="item.tip">
							<view v-for="tag in item.tip.split(',')">{{tag}}</view> 
							<view v-if="item.isDaijiao==1">带教服务</view>
						</view>
						
					</view>

					<view class="item-bottom">
						<view class="item-user">
							<view class="item-user-picdir">
								<image :src="baseImage + item.picdir" mode="" v-if="item.picdir"></image>
								<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
							</view>
							<view class="item-user-name">
								{{item.companyTitle}}
							</view>
						</view>
						<view class="item-address">
							{{`${item.city.includes('/')? item.city.split('/')[2]:item.city}`}}
							<br />
							<view class="item-date">
								{{item.timeCreate.split(" ")[0]}}
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="bottomLine">
				<text class="span" @click="reloadMore" v-if="type=='1'">查看更多人才</text>
				<text class="span" @click="reloadMore" v-else>查看更多职位</text>
			</view>
		</view>
		
		<!-- 地址Select -->
		<van-popup position="bottom" :show="areaShowPicker">
			<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel" />
		</van-popup>
		
		<!-- 底部登录弹窗 -->
		<van-popup position="bottom" :show="show" :z-index="2300" class="reloadMore" closeable close-icon="close" close-icon-position="top-right" @close="show = false">
			<NotLoginBottom ref="NotLoginBottomRef"></NotLoginBottom>
		</van-popup>

		<Tabber currentPagePath="home"></Tabber>
	</view>
</template>

<script>
	import {
		getBanner
	} from "@/core/web-api/youke.js"
	import Tabber from '@/pages/common/Tabber.vue'
	import NotLoginBottom from '@/components/NotLoginBottom.vue'
	import {
		mapGetters,
		mapState
	} from "vuex"
	import {
		getGangwei,
	} from "@/core/web-api/qiyeduan"
	import {
		getPostList,
		getQiyeList
	} from "@/core/web-api/qiuzhiduan.js"
	import {
		areaList
	} from '@/node_k/area-data/areadata';
	import {getZhaopinList,getQiuzhiList} from "@/core/web-api/youke.js"
	export default {
		data() {
			return {
				areaList: areaList,
				areaShowPicker:false,
				indicatorDots: false,
				autoplay: true,
				circular: true,
				interval: 3000, //切换的间隔时间
				duration: 500, //滑动动画时长
				bannerList: [],
				searchValue: "",
				cataList: [],
				sortActive: "",
				filters: {
					city: "",
					education: "", //学历			
					gangwei: "", //职位类型			
					hangye: "", //所属行业			
					keywords: "", //关键字筛选			
					province: "", //省份			
					workExperience: "", //工作经验			
					workTime: "", //工作时间			
					workType: "",
				},
				type:"",
				page: {
					current: 1,
					limit: 10,
				},
				total: 0,
				dataList: [],
				show:false,
			}
		},
		components: {
			Tabber,NotLoginBottom
		},
		methods: {
			onCelcel(){
				this.areaShowPicker = false;
			},
			cityOpen(){
				this.areaShowPicker = true;
			},
			/**
			 * 选择地址
			 */
			selectQydz({
				values
			}) {
				let list = values
					.filter((item) => !!item)
					.map((item) => item.name);
				this.filters.city = list[0] + "/" +list[1] + "/" + list[2];
				this.filters.province = list[0];
				this.areaShowPicker = false;
				this.page.current = 1;
				this.getDataList()
			},
			toSubmit() {
				let url = "";
				if (this.type == 1) {
					url = "/pages/ucenter/qiyeduan/gangwei/add"
				} else {
					url = "/pages/ucenter/qiuzhiduan/qiuzhi/add"
				}
				uni.navigateTo({
					url
				})
			},
			toUrl(url){
				uni.navigateTo({
					url
				})
			},
			// TODO:最新、推荐筛选暂无
			/**
			 * 跳转筛选页
			 */
			toToggle() {
				uni.navigateTo({
					url: "/pages/web/search/search"
				})
			},
			/**
			 * tab筛选
			 * @param {Object} item
			 */
			tabClick(item) {
				if (this.filters.gangwei == (item.title || item.gangwei)) return;
				this.filters.gangwei = item.gangwei;
				this.filters.hangye = item.hangye;
				this.page.current = 1;
				this.getDataList();
			},
			/**
			 * 搜索
			 */
			onSearch() {
				this.page.current = 1;
				this.filters.city = "";
				this.filters.education = "";
				this.filters.province = "";
				this.filters.workExperience = "";
				this.filters.workTime = "";
				this.filters.workType = "";


				this.getDataList()
			},
			/**
			 * 跳转详情
			 */
			openDetails(item) {
				let url = "";
				if (this.type == '1') {
					url = "/pages/youke/web/rencaiDetail?id=" + item.id;
				} else {
					url = "/pages/youke/web/gangweiDetail?id=" + item.id;
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 获取轮播图
			 */
			getSwiperList() {
				getBanner().then(res => {
					this.bannerList = res.data.list
				})
			},

			/**
			 * 加载岗位意向
			 */
			getCataList() {
				if (this.type == 1) {
					getGangwei().then(res => {
						this.cataList = res.data.list;
						if (!this.filters.gangwei) {
							this.filters.gangwei = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
								.gangwei :
								"";
							this.filters.hangye = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
								.hangye :
								"";
						}
						this.getDataList();
					})
				} else {
					getPostList().then(res => {
						this.cataList = res.data.list;
						if (!this.filters.gangwei) {
							this.filters.gangwei = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
								.gangwei :
								"";
							this.filters.hangye = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
								.hangye :
								"";
						}
						this.getDataList();
					})
				}

			},

			/**
			 * 加载数据列表
			 */
			getDataList() {
				let filters = JSON.parse(JSON.stringify(this.filters));
				if (filters.salary) {
					let salaryList = filters.salary.split("-");
					filters.salaryMin = salaryList[0]
					filters.salaryMax = salaryList[1]
				} else {
					filters.salaryMin = ""
					filters.salaryMax = ""
				}
				if (this.type == 1) {
					this.getQiuzhiDataList(filters)
				} else {
					this.getQiyeDataList(filters);
				}
			},

			/**
			 * 企业加载求职列表
			 */
			getQiuzhiDataList(filters) {
				getQiuzhiList({
					...this.page,
					...filters
				}).then(res => {
					if (res.code == 20000) {
						if (this.page.current == 1) {
							this.dataList = res.data.list;
						} else {
							this.dataList.push(...res.data.list)
						}
						this.total = res.data.total;
					}
				})
			},

			/**
			 * 求职者加载企业列表
			 */
			getQiyeDataList(filters) {
				getQiyeList({
					...this.page,
					...filters
				}).then(res => {
					if (res.code == 20000) {
						if (this.page.current == 1) {
							this.dataList = res.data.list;
						} else {
							this.dataList.push(...res.data.list)
						}
						this.total = res.data.total;
					}
				})
			},

			/**
			 * 分页
			 */
			pageData() {
				if (this.total == this.dataList.length) {
					return;
				}
				this.page.current++;
				this.getDataList();
			},
			getUserInfo() {
				if (Object.keys(this.userInfo).length > 0) return;
				this.$store.dispatch("getUserInfoAction")
			},
			getUsualAction() {
				if (Object.keys(this.usual).length > 0) return;
				this.$store.dispatch("getUsualAction")
			},
			dataInit(){
				let promise = null
				if(this.type=="1"){
					promise = getQiuzhiList();
				}else{
					promise = getZhaopinList();
				}
				promise.then(res=>{
					this.dataList = res.data.list;
				})
			},
			reloadMore(){
				//加载更多
				this.show = true
			}
		},
		onReachBottom() {
			// this.pageData();
		},
		computed: {
			...mapGetters(['getStateHeight', 'getNavbar', 'getMenuRectHeight']),
			...mapState(['baseImage', "indexFilters", 'youkeType','ykseekerToken','ykqiyeToken', 'userInfo', 'usual', 'imgUrl']),
			getCataLabel(){
				return function(item){
					let title = this.type==1? item.title:item.gangwei;
					console.log("computed title:"+title);
					if(title.length>10){
						title = title.slice(0,10)+"..."
					}
					return title;
				}
			}
		},
		watch: {
			youkeType:{
				immediate:true,
				deep:true,
				handler(e){
					console.log("youke,type:"+e)
					this.type = e; 
				}
			},
	 
			indexFilters: {
				immediate: true,
				deep: true,
				handler(obj) {
					if (!obj) return;
					for (let key in obj) {
						this.filters[key] = obj[key];
					}
				}
			},
			userInfo: {
				immediate: true,
				deep: true,
				handler(obj) {
					if (obj && Object.keys(obj).length > 0) {
						this.$socket.reset()
					}
				}
			}
		},
		onShow() {
			this.page.current = 1;
			this.dataInit();
			// this.getCataList();

		},
		created() {
			console.log("ddddddddddddddddddd");
			this.filters = {
				city: "",
				education: "", //学历			
				gangwei: "", //职位类型			
				hangye: "", //所属行业			
				keywords: "", //关键字筛选			
				province: "", //省份			
				workExperience: "", //工作经验			
				workTime: "", //工作时间			
				workType: "",
			};
			// this.getUserInfo()
			this.getSwiperList();
			this.getUsualAction();
		}
	}
</script>

<style>
	@import url(./home.css);
</style>
<style scoped lang="less">
	.span{
		&-right{
			display: flex;
			justify-content: flex-end;
			flex: 1;
		}
	}
	.nav{
		display: flex;
		align-items: center;
	}
	.menu {
		margin-bottom: 40upx;
		position: relative;
		z-index: 20;
		display: flex;

		&-content {
			width: 650upx;
			overflow: hidden;
			margin-right: 10upx;
		}

		&-view {
			white-space: nowrap;
		}

		&-item {
			display: inline-block;
			font-size: 32upx;
			color: #080808;
			margin-right: 50upx;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				position: relative;
				font-weight: bold;

				&::after {
					display: block;
					content: '';
					width: 74rpx;
					height: 7rpx;
					background: #0180FF;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -37rpx;

				}
			}
		}
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 20upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}

		&-box {
			margin-top: 30upx;
		}

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #d0e0fd;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 15upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-main {
			position: relative;
		}

		&-address {
			font-size: 20upx;
			color: #333333;
			text-align: right;
			line-height: 1.5;
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-user {
			display: flex;
			align-items: center;

			&-picdir {
				width: 54upx;
				height: 54upx;
				border-radius: 50%;
				border: 2upx solid #b5b5b5;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			&-name {
				margin-left: 10upx;
				font-size: 22upx;
				color: #999999;
			}
		}

		&-status {
			font-size: 25upx;
			color: #999999;

			&.publish {
				color: #00cf7a;
			}

			&.audio {
				color: #fc637d;
			}
		}

		&-info {
			line-height: 1.5;

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;
			}
		}
	}
</style>